<template>
    <div class="inoculate">
        <div class="search">
            <span>姓名:</span>
            <el-input v-model="name" placeholder="请输入姓名" clearable />
            <span>身份证:</span>
            <el-input v-model="ID" placeholder="请输入ID" clearable />
            <el-button type="primary">搜索</el-button>
        </div>


        <div class="inoculateTable">
            <Title><h2>接种人员信息表</h2></Title>
                <el-table :data="showTable" style="display: flex" v-loading="loading" :row-class-name="tableRowClassName" >
                    <el-table-column fixed prop="createDate" label="下单日期" width="120"/>
                    <el-table-column prop="name" label="姓名" width="70" />
                    <el-table-column prop="sex" label="性别" width="70" />
                    <el-table-column prop="variety" label="接种疫苗" width="150" />
                    <el-table-column prop="price" label="价格" width="90" />
                    <el-table-column prop="birthday" label="生日" width="120" />
                    <el-table-column prop="ID" label="身份证" width="200" />
                    <el-table-column prop="tel" label="电话" width="150" />
                    <el-table-column prop="email" label="Email" width="200" />
                    <el-table-column prop="endTime" label="endTime" width="200" />
                    <el-table-column prop="notice" label="操作结果" width="100" >
                        <template v-slot="{row: {notice}}">
                            <span v-if="notice === true">已接种</span>
                            <span v-else>未接种</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template v-slot="scope">
                            <el-button type="text" size="small" @click="handleClick(scope.row)" v-if="scope.row.notice==true" disabled>验证信息</el-button>
                            <el-button type="text" size="small" @click="handleClick(scope.row)" v-else>验证信息</el-button>
                        </template>
                    </el-table-column>
                </el-table>


            <el-dialog
                v-model="verifyDialog"
                title="验证客户信息"
                width="30%"
                :before-close="cancle">
                <el-form :model="editForm" label-width="120px">
                    <el-form-item label="姓名">
                        <el-input v-model="editForm.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="身份证">
                        <el-input v-model="editForm.ID" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="接种疫苗">
                        <el-input v-model="editForm.variety" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="创建订单时间">
                        <el-input v-model="editForm.createDate" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="输入身份证">
                        <el-input v-model="ID" placeholder="请输入身份证"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="cancle">取消</el-button>
                    <el-button type="primary" @click="verify">验证</el-button>
                  </span>
                </template>
            </el-dialog>
            <div class="page">
                <el-pagination
                        class="pages"
                        background layout="prev, pager, next"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import Title from './Title'

    export default {
        name: "Inoculate",
        components:{Title},
        data(){
            return{
                //验证信息弹框
                verifyDialog:false,
                ID:null,
                search:{
                    name:'',
                    date:''
                },
                editForm:[],
                currentPage:1,
                pageSize:10,
                tableData : [
                    {
                        createDate: '2016-05-03',
                        name: 'Tom',
                        sex: '男',
                        variety: '新冠疫苗',
                        price: '￥40',
                        birthday: '1999-12-22',
                        ID: '513427199912221021',
                        tel: '15775407848',
                        email:'2026680093@qq.com',
                        endTime:'2022-3-18 15:31:56',
                        notice:true
                    },
                    {
                        createDate: '2016-05-03',
                        name: 'Tom',
                        sex: '男',
                        variety: '新冠疫苗',
                        price: '￥40',
                        birthday: '1999-12-22',
                        ID: '513427199912221021',
                        tel: '15775407848',
                        email:'2026680093@qq.com',
                        endTime:'',
                        notice:false
                    }
                ]
            }
        },
        computed: {
            showTable() {
                console.log("开始分解数据");
                return this.tableData.slice(
                    (this.currentPage - 1) * this.pageSize,
                    this.currentPage * this.pageSize
                );
            },
            total(){
                return this.tableData.length
            }
        },
        methods:{
            getTimeNow(){
                var date=new Date()
                var time=date.getFullYear()+'-'+
                    (parseInt(date.getMonth())+1)+'-'+
                        date.getDate()+' '+
                        date.getHours()+':'+
                        date.getMinutes()+':'+
                        date.getSeconds()
                return time
            },
            tableRowClassName(tableData){
                // console.log(tableData)
                if(tableData.row.notice==true){
                    return 'success-row'
                }else{
                    return 'warning-row'
                }
            },
            cancle(){
              this.verifyDialog=false
              this.editForm={}
            },
            verify(){
                let time=this.getTimeNow()
                this.editForm.endTime=time
                if(this.ID===this.editForm.ID){
                    this.$message({
                        message: "验证成功",
                        type: 'success',
                    });
                    this.editForm.notice=true
                    console.log(this.editForm)
                    this.verifyDialog=false
                }else{
                    this.$message({
                        message: "验证失败！请重新输入身份证",
                        type: 'error',
                    });
                }


            },
            getTableData(){

            },
            handleClick(row){
                this.verifyDialog=true
                this.editForm=row

                console.log(this.editForm)
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
            },
        },
    }
</script>

<style scoped lang="less">

    .inoculate{
        display: flex;
        flex-direction: column;
        .search{
            width: 100%;
            display: flex;
            align-items: center;
            .el-input{
                width: 15%;
                margin: 0 20px;
            }
        }
        .inoculateTable{
            position: relative;
            border-radius: 20px;
            background-color: white;
            padding: 10px;
            display: flex;
            width: 100%;
            flex-direction: column;
            margin-top: 20px;
            .el-table{
                height: 600px;
            }
            .page{
                height: 45px;
                width: 100%;
            }
            .pages{
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        }
    }
    .green{
        background-color: darkseagreen;
    }
</style>
